<template>
  <div>
    <el-dialog
      title="题目预览"
      :visible="showRoleDialog"
      width="30%"
      @close="close"
    >
      <el-row type="flex">
        <el-col>【题型】：{{ oneprovince.questionType|questionType }}</el-col>
        <el-col>【编号】：{{ oneprovince.id }}</el-col>
        <el-col>【难度】：{{ oneprovince.difficulty }}</el-col>
        <el-col>【标签】：{{ oneprovince.tags|| '无' }}</el-col>
      </el-row>
      <el-row type="flex" style="marginTop:20px">
        <el-col>【学科】：{{ oneprovince.subject }}</el-col>
        <el-col>【目录】：{{ oneprovince.catalog }}</el-col>
        <el-col>【方向】：{{ oneprovince.direction }}</el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col>【题干】：</el-col>
        <el-col v-html="oneprovince.question" />
      </el-row>
      <hr>
      <el-row v-if="oneprovince.questionType==='3'">
        <el-col>【参考答案】：无</el-col>
        <el-col>【答案解析】: <p v-html="oneprovince.answer" /></el-col>
        <el-col>【题目备注】：{{ oneprovince.remarks }}</el-col>
      </el-row>
      <el-row v-else-if="oneprovince.questionType==='1'">
        <el-col>{{ oneprovince.questionType|questionType }} 选项：（以下选中的选项为正确答案）</el-col>
        <el-radio v-for="item in oneprovince.options" :key="item.id" v-model="isRight" :label="item.isRight">{{ item.title }}</el-radio>
        <el-col>【答案解析】: <p v-html="oneprovince.answer" /></el-col>
        <el-col>【题目备注】：{{ oneprovince.remarks }}</el-col>
      </el-row>
      <el-row v-else>
        <el-col>{{ oneprovince.questionType|questionType }} 选项：（以下选中的选项为正确答案）</el-col>
        <el-radio v-for="item in oneprovince.options" :key="item.id" v-model="isRight" :label="item.isRight">{{ item.title }}</el-radio>
        <el-col>【答案解析】: <p v-html="oneprovince.answer" /></el-col>
        <el-col>【题目备注】：{{ oneprovince.remarks }}</el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
    props: {
        showRoleDialog: {
            type: Boolean,
            default: false
        },
        oneprovince: {
          type: Object,
          required: true
        }
    },
    data() {
        return {
          isRight: 1
        }
    },
    methods: {
      close() {
        console.log(123)
        this.$emit('close')
      }
    }
}
</script>
<style>

</style>